<template>
  <div id="app">
    <header><p>购物车中商品数量：{{cartCount}}</p></header>
    <div class="product-list">
      <product name="华为Mate40 Pro"></product>  
      <product name="iPhone 12 pro"></product>
      <product name="小米11 Ultra"></product>  
      <product name="vivo S9"></product>  
    </div>
    <cart></cart>
  </div>
</template>

<script>
  import product from './components/product.vue'
  import cart from './components/cart.vue'

  export default {
    el: '#app',
    components:{product, cart},
    computed: {
        cartCount(){
           return this.$store.getters.products.length;
        }
    }
  }
</script>

<style>
#app{
  width:500px;
  height:250px;
  border: 2px solid #999;
  border-radius: 10px;
  margin:40px auto;
  padding: 0 20px;
  position: relative;
}
header{
  text-align: right;
  border-bottom: 2px solid #999;
}
</style>
